<script setup>
import { computed } from "vue"
import {formatPrice} from "@/utils/format.js"
import {routerTo} from "@/utils/common.js"
const props = defineProps({
	info:{
		type:Object,
		default:()=>({})
	},
	type:{
		type:Number,
		default:0  // 0 订单列表处， 1 商城分类列表处， 2 商品购物车处， 3 规格选择处, 4 创建订单处， 5 订单历史详情
	},
	sku:{
		type:Object,
		default:()=>({})
	}
})
const emits = defineEmits(["selectBuy"])
const cardData =computed(()=>{
	const _bannerImg = props.info?.goods_banner_img || props.info?.goods_banner_imgs?.[0] || null;
	const _skuInfo = props.sku._id ? {...props.sku} : {...props.info.sku?.[0]}
	return {
		_bannerImg,
		_skuInfo,
		...props.info
	}
})
const numberChange = (e)=>{
	console.log(e);
}
const selectBuy = ()=>{
	emits("selectBuy",{...props.info})
}
</script>

<template>	
	<view class="card-goods-item" >
		<!-- 左侧 -->
		<view class="card-left">
			<image class="img" src="/static/tmp_goods.jpg" mode="aspectFill"></image>
		</view>
		<!-- 右侧 -->
		<view class="card-right">
			<view class="top-box">
				<view class="title">测试标题测试标题测试标题测试标题测试标题题</view>	
			</view>
			
			<view class="bottom-box">
				<view class="left">
					<view class="price-wrap">
						<view class="new">
							<text>￥</text>
							<text class="big">
								5799
							</text>
						</view>
						<view class="old" >￥9988</view>
					</view>
					
				</view>
				<view class="right">
					<view class="buy">选购</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.card-goods-item {
    width: 100%;height: 180rpx;display: flex;justify-content: space-between;
	align-items: center;gap: 14rpx;
    .card-left {
		flex-shrink: 0;height: 100%;aspect-ratio: 1/1;
		border-radius: 6rpx;overflow: hidden;
        .img {width: 100%;height: 100%;}
    }
    .card-right {
		flex: 1;height: 100%;display: flex;flex-direction: column;justify-content: space-between;
        .top-box {
			.title {
				font-size: 28rpx;color: #000;
				// 超过两行显示省略号
				display: -webkit-box;        /* 必须 */
				-webkit-box-orient: vertical; /* 必须：竖直排列 */
				-webkit-line-clamp: 2;       /* 显示行数 */
				overflow: hidden;             /* 超出隐藏 */
				text-overflow: ellipsis;      /* 显示省略号 */
			} 
			.sku {display: flex;align-items: center;flex-wrap: wrap;margin-top: 10rpx;
            .tag {
				padding: 6rpx 10rpx;font-size: 20rpx;color: #333;
				background-color: #f0f0f0;border-radius: 4rpx;
			}
        }}
        .bottom-box {
			display: flex;align-items: flex-end;justify-content: space-between;
            .left {
				.price-wrap {
					font-size: 22rpx;
					.new {font-weight: bolder;color: $uni-color-error;.big {font-size: 28rpx;}} 
					.old {font-size: 22rpx;color: #999;text-decoration: line-through;}
				}
			}
            .right {
				.buy {
					font-size: 24rpx;background: $uni-color-primary;
					border-radius: 40rpx;padding: 12rpx 24rpx;color: #fff;
				}}
        }
    }
}
</style>
